<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
    }

    table {
      position: relative;
      width: 730px;
      height: 730px;
      margin: 0 auto;
      border: 5px solid black;
      background: url(./src=http___pic45.nipic.com_20140804_2372131_155038114014_2.jpg&refer=http___pic45.nipic.webp) no-repeat;
      background-size: 100%;
      background-position: center;
      padding: 24px 12px;
    }

    td {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 13px;
      margin-bottom: 11px;
      cursor: pointer;
    }

    .bgc1 {
      background-color: black;
    }

    .bgc2 {
      background-color: white;
    }

    button {
      position: absolute;
      width: 200px;
      height: 100px;
      bottom: 100px;
      right: 200px;
      text-align: center;
      line-height: 100px;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <table></table>
  <button>悔棋</button>
  <script>
    let arr = [
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
      [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
    ]
    //封装渲染函数
    const render = () => {
      document.querySelector('table').innerHTML = ''
      arr.forEach((item, index) => {
        let tr = document.createElement('tr')
        //console.log(item);
        item.forEach((item2, index2) => {
          let td = document.createElement('td')//遍历数组，绘制棋盘
          //给td标签设置自定义属性，用来作为坐标使用
          td.dataset.y = index
          td.dataset.x = index2
          tr.appendChild(td)
          //给数组里面的对象做条件判断，这样就能渲染出颜色
          if (item2.num === 1) {
            td.classList.add('bgc1')
          }
          else if (item2.num === 2) {
            td.classList.add('bgc2')
          }
        })
        document.querySelector('table').appendChild(tr)
      })
    }
    render()
    //判断下棋顺序的全局变量
    let flag = true
    //所有黑棋数组
    let blackArr = []
    //所有白棋数组
    let whiteArr = []
    //轮流下棋逻辑
    document.querySelector('table').addEventListener('click', function (e) {
      if (e.target.dataset.x) {
        let td = e.target
        //判断黑白棋子的顺序
        if (flag) {
          //判断点击的地方是否已经有棋子了，避免棋子覆盖
          if (!arr[td.dataset.y][td.dataset.x].num) {
            flag = !flag
            // td.dataset.id = 1
            arr[td.dataset.y][td.dataset.x].num = 1
            //每走一步，就将其添加至对应的数组当中
            blackArr.push([td.dataset.y, td.dataset.x])
            blackXWin(td)
            blackYWin(td)
            blackX_YWin(td)
            blackY_XWin(td)
          }
        } else {
          if (!arr[td.dataset.y][td.dataset.x].num) {
            // console.log(11);
            flag = !flag
            // td.dataset.id = 2
            arr[td.dataset.y][td.dataset.x].num = 2
            whiteArr.push([td.dataset.y, td.dataset.x])
            whiteXWin(td)
            whiteYWin(td)
            whiteX_YWin(td)
            whiteY_XWin(td)
          }
        }
      }
      render()
    })

    //横轴获胜逻辑
    //黑棋
    function blackXWin(td) {
      //当前X轴的所有棋子集合
      let xAllArr = []
      //判断横轴胜负逻辑的X轴棋子
      let xWinArr = []
      blackArr.map(item => {
        if (item[0] == td.dataset.y) {
          //将当前排的所有棋子加入对应数组
          xAllArr.push(item[1])
        }
      })
      //把横排总数组排序，方便比较
      xAllArr.sort((a, b) => a - b)
      for (let i = 1; i < xAllArr.length; i++) {
        // console.log(xAllArr[i]);
        if (xAllArr[i] == (+xAllArr[i - 1] + 1)) {
          //如果相邻的两个棋子数量相差1，就将其添加至胜负逻辑数组
          xWinArr.push(xAllArr[i])
        } else {
          //否则得清空
          xWinArr = []
        }
      }
      //获胜条件
      if (xWinArr.length == 4) {
        //这里要用定时器将弹框变成异步任务，否则第五颗棋子渲染不出来就提示获胜了
        setTimeout(function () {
          alert('黑棋获胜!')
          location.reload()
        }, 100)
      }
    }
    //白棋
    function whiteXWin(td) {
      let xAllArr = []
      let xWinArr = []
      whiteArr.map(item => {
        if (item[0] == td.dataset.y) {
          xAllArr.push(item[1])
        }
      })
      //横排总数组排序
      xAllArr.sort((a, b) => a - b)
      for (let i = 1; i < xAllArr.length; i++) {
        // console.log(xAllArr[i]);
        if (xAllArr[i] == (+xAllArr[i - 1] + 1)) {
          xWinArr.push(xAllArr[i])
        } else {
          xWinArr = []
        }
      }
      if (xWinArr.length == 4) {
        setTimeout(function () {
          alert('白棋获胜!')
          location.reload()
        }, 100)
      }
    }

    //竖轴获胜逻辑
    //黑棋
    function blackYWin(td) {
      //当前Y轴的所有棋子集合
      let yAllArr = []
      //判断竖轴胜负逻辑的X轴棋子
      let yWinArr = []
      blackArr.map(item => {
        if (item[1] == td.dataset.x) {
          yAllArr.push(item[0])
        }
      })
      //竖排总数组排序
      yAllArr.sort((a, b) => a - b)
      for (let i = 1; i < yAllArr.length; i++) {
        // console.log(xAllArr[i]);
        if (yAllArr[i] == (+yAllArr[i - 1] + 1)) {
          yWinArr.push(yAllArr[i])
        } else {
          yWinArr = []
        }
      }
      if (yWinArr.length == 4) {
        setTimeout(function () {
          alert('黑棋获胜!')
          location.reload()
        }, 100)
      }
    }
    //白棋
    function whiteYWin(td) {
      //当前Y轴的所有棋子集合
      let yAllArr = []
      //判断竖轴胜负逻辑的X轴棋子
      let yWinArr = []
      whiteArr.map(item => {
        if (item[1] == td.dataset.x) {
          yAllArr.push(item[0])
        }
      })
      //竖排总数组排序
      yAllArr.sort((a, b) => a - b)
      for (let i = 1; i < yAllArr.length; i++) {
        // console.log(xAllArr[i]);
        if (yAllArr[i] == (+yAllArr[i - 1] + 1)) {
          yWinArr.push(yAllArr[i])
        } else {
          yWinArr = []
        }
      }
      // console.log(yWinArr);
      if (yWinArr.length == 4) {
        setTimeout(function () {
          alert('白棋获胜!')
          location.reload()
        }, 100)
      }
    }

    //正斜轴获胜逻辑
    //黑棋
    function blackX_YWin(td) {
      //当前X轴的所有棋子集合
      let x_yAllArr = []
      //判断横轴胜负逻辑的X轴棋子
      let x_yWinArr = []
      blackArr.map(item => {
        //判断斜轴棋子，斜轴棋子的x和y之差都是相同的
        if ((item[0] - td.dataset.y) == (item[1] - td.dataset.x)) {
          x_yAllArr.push(item[1])
        }
      })
      x_yAllArr.sort((a, b) => a - b)
      for (let i = 1; i < x_yAllArr.length; i++) {
        if (x_yAllArr[i] == (+x_yAllArr[i - 1] + 1)) {
          //如果相邻的两个棋子数量相差1，就将其添加至胜负逻辑数组
          x_yWinArr.push(x_yAllArr[i])
        } else {
          //否则得清空
          x_yWinArr = []
        }
      }
      //获胜条件
      if (x_yWinArr.length == 4) {
        setTimeout(function () {
          alert('黑棋获胜!')
          location.reload()
        }, 100)
      }
    }
    //白棋
    function whiteX_YWin(td) {
      //当前X轴的所有棋子集合
      let x_yAllArr = []
      //判断横轴胜负逻辑的X轴棋子
      let x_yWinArr = []
      whiteArr.map(item => {
        // console.log(item[0], td.dataset.y);
        // console.log(item[1], td.dataset.x);
        //判断斜轴棋子
        if ((item[0] - td.dataset.y) == (item[1] - td.dataset.x)) {
          x_yAllArr.push(item[1])
        }
      })
      x_yAllArr.sort((a, b) => a - b)
      // console.log(x_yAllArr);
      for (let i = 1; i < x_yAllArr.length; i++) {
        // console.log(x_yAllArr[i]);
        if (x_yAllArr[i] == (+x_yAllArr[i - 1] + 1)) {
          //如果相邻的两个棋子数量相差1，就将其添加至胜负逻辑数组
          x_yWinArr.push(x_yAllArr[i])
        } else {
          //否则得清空
          x_yWinArr = []
        }
      }
      // console.log(x_yWinArr);
      //获胜条件
      if (x_yWinArr.length == 4) {
        setTimeout(function () {
          alert('白棋获胜!')
          location.reload()
        }, 100)
      }
    }

    //斜轴获胜逻辑02
    //黑棋
    function blackY_XWin(td) {
      //当前X轴的所有棋子集合
      let y_xAllArr = []
      //判断横轴胜负逻辑的X轴棋子
      let y_xWinArr = []
      blackArr.map(item => {
        // console.log(item[0], td.dataset.y);
        // console.log(item[1], td.dataset.x);
        //判断斜轴棋子
        if (0 - (item[0] - td.dataset.y) == (item[1] - td.dataset.x)) {
          y_xAllArr.push(item[1])
        }
      })
      y_xAllArr.sort((a, b) => a - b)
      // console.log(y_xAllArr);
      for (let i = 1; i < y_xAllArr.length; i++) {
        // console.log(y_xAllArr[i]);
        if (y_xAllArr[i] == (+y_xAllArr[i - 1] + 1)) {
          //如果相邻的两个棋子数量相差1，就将其添加至胜负逻辑数组
          y_xWinArr.push(y_xAllArr[i])
        } else {
          //否则得清空
          y_xWinArr = []
        }
      }
      // console.log(y_xWinArr);
      //获胜条件
      if (y_xWinArr.length == 4) {
        setTimeout(function () {
          alert('黑棋获胜!')
          location.reload()
        }, 100)
      }
    }
    //白棋
    function whiteY_XWin(td) {
      //当前X轴的所有棋子集合
      let y_xAllArr = []
      //判断横轴胜负逻辑的X轴棋子
      let y_xWinArr = []
      whiteArr.map(item => {
        // console.log(item[0], td.dataset.y);
        // console.log(item[1], td.dataset.x);
        //判断斜轴棋子
        if (0 - (item[0] - td.dataset.y) == (item[1] - td.dataset.x)) {
          y_xAllArr.push(item[1])
        }
      })
      y_xAllArr.sort((a, b) => a - b)
      // console.log(y_xAllArr);
      for (let i = 1; i < y_xAllArr.length; i++) {
        // console.log(y_xAllArr[i]);
        if (y_xAllArr[i] == (+y_xAllArr[i - 1] + 1)) {
          //如果相邻的两个棋子数量相差1，就将其添加至胜负逻辑数组
          y_xWinArr.push(y_xAllArr[i])
        } else {
          //否则得清空
          y_xWinArr = []
        }
      }
      // console.log(y_xWinArr);
      //获胜条件
      if (y_xWinArr.length == 4) {
        setTimeout(function () {
          alert('白棋获胜!')
          location.reload()
        }, 100)
      }
    }

    //悔棋
    document.querySelector('button').addEventListener('click', function () {
      //判断前面一步是黑棋还是白棋
      if (!flag) {
        //黑棋
        //获取对应棋子总数组的最后一个数据的值
        const y = blackArr[blackArr.length - 1][0]
        const x = blackArr[blackArr.length - 1][1]
        //将对应的对象里的num值删除，这样渲染出来对应棋子就消失了
        delete arr[y][x].num
        //删除总数组里的最后一个数据，否则胜负逻辑会有问题
        blackArr.splice(blackArr.length - 1, 1)
        //重置下棋顺序
        flag = !flag
      } else {
        //白棋
        const y = whiteArr[whiteArr.length - 1][0]
        const x = whiteArr[whiteArr.length - 1][1]
        delete arr[y][x].num
        whiteArr.splice(whiteArr.length - 1, 1)
        flag = !flag
      }
      render()
    })
  </script>
</body>

</html>